import React, { useRef, useEffect, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import './index.css';

interface Iprops {
  lineColor?: string;
  starColor?: string;
  duration?: number;
  children?: React.ReactChildren;
  starLength: string | number;
}

export default ({
  lineColor = '#235fa7',
  starColor = '#4fd2dd',
  duration = 2,
  starLength = 50,
  children,
}: Iprops) => {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const [path, setPath] = useState('');
  const [uniId, setUniId] = useState({
    pathId: '',
    maskId: '',
    gradientId: '',
  });
  const sizeFlyBox = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const { clientWidth, clientHeight } = sizeFlyBox.current as HTMLDivElement;
    const id = uuidv4();
    setUniId({
      pathId: `path-${id}`,
      maskId: `mask-${id}`,
      gradientId: `gradient-${id}`,
    });
    console.log(uuidv4());
    setWidth(clientWidth);
    setHeight(clientHeight);
    setPath(
      `M5 5 L${clientWidth - 5} 5 L${clientWidth - 5} ${clientHeight - 5} L5 ${
        clientHeight - 5
      } Z`,
    );
    // M5 5 L395 5 L395 395 L5 395 Z
  }, []);
  return (
    <div className="graphic-fly-box" ref={sizeFlyBox}>
      <svg width={width} height={height}>
        <defs>
          <path id={uniId.pathId} d={path} fill="none" />
          <mask id={uniId.maskId}>
            <circle
              r={starLength}
              cx={0}
              cy={0}
              fill={`url(#${uniId.gradientId})`}
            >
              <animateMotion
                dur={duration}
                path={path}
                rotate={'auto'}
                repeatCount="indefinite"
              />
            </circle>
          </mask>
          <radialGradient
            id={uniId.gradientId}
            cx="50%"
            cy="50%"
            fx="100%"
            fy="50%"
            r="50%"
          >
            <stop offset="0%" stopColor="#fff" stopOpacity={1}></stop>
            <stop offset="100%" stopColor="#fff" stopOpacity={0}></stop>
          </radialGradient>
        </defs>
        <use href={`#${uniId.pathId}`} strokeWidth={1} stroke={lineColor} />
        <use
          href={`#${uniId.pathId}`}
          strokeWidth={3}
          stroke={starColor}
          mask={`url(#${uniId.maskId})`}
        />
      </svg>
      <div className="graphic-fly-box-content">{children}</div>
    </div>
  );
};
